<template>
  <div>
    <el-form :model="form">
      <el-form-item label="文章标题">
        <el-input v-model="form.articleTitle" />
      </el-form-item>
      <el-form-item label="文章简介">
        <el-input v-model="form.articleIntro" />
      </el-form-item>
      <el-form-item label="文章内容">
        <div>
          <quill-editor height="300" v-model:content="form.articleContent" ref="myQuillEditor" :options="editorOption"
            contentType="html" />
        </div>
      </el-form-item>
      <el-form-item label="文章类型">
        <el-radio-group v-model="form.articleType">
          <el-radio label="原创">原创</el-radio>
          <el-radio label="转载">转载</el-radio>
          <el-radio label="翻译">翻译</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="文章标签">
        <el-select v-model="tags" multiple placeholder="请选择文章标签" style="width: 340px">
          <el-option v-for="[key, label] in articleTags" :key="key" :label="label" :value="label" />
        </el-select>
      </el-form-item>
    </el-form>
    <div class="q-center">
      <el-button class="btn-publish" 
                  type="danger" 
                  round 
                  :loading="isLongding"   
                  @click="publish">{{ route.query.articleId? '修改': '发布' }}</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import { articleTags } from '@/utils/constants'
import { addArticle, ArticleDetail, updateArticle } from '@/api/article'
import { ElMessage } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()


const form = reactive({
  articleTitle: '',
  articleContent: '',
  articleTags: '',
  articleType: '原创',
  articleIntro: ''
})

const tags = ref([])
const isLongding = ref(false)


async function publish() {
  isLongding.value = true
  form.articleTags = tags.value.join(',')
  try {
    if(route.query.articleId) {
      await updateArticle(form)
      ElMessage.success('修改成功')
    } else {
      await addArticle(form)
      ElMessage.success('发布成功')
    }
   
    isLongding.value = false
    router.push('/')
  } finally {
    isLongding.value = false
  }
}


// 文章详情
const ArticleData = ref({})
async function getDetail() {
  ArticleData.value = await ArticleDetail(route.query.articleId + '')
  console.log('ArticleData', ArticleData.value)
  // 初始化
  form.id = ArticleData.value.id
  form.articleId = ArticleData.value.articleId
  form.articleTitle = ArticleData.value.articleTitle
  form.articleContent = ArticleData.value.articleContent
  tags.value = ArticleData.value.articleTags.split(',')
  form.articleType = ArticleData.value.articleType
  form.articleIntro = ArticleData.value.articleIntro
}
if (route.query.articleId) {
  getDetail()
}



const editorOption = {
  modules: {
    toolbar: [
      // 加粗 斜体 下划线 删除线 -----['bold', 'italic', 'underline', 'strike']
      ['bold', 'italic', 'underline', 'strike'],
      // 引用  代码块-----['blockquote', 'code-block']
      ['blockquote', 'code-block'],
      // 1、2 级标题-----[{ header: 1 }, { header: 2 }]
      [{ header: 1 }, { header: 2 }],
      // 有序、无序列表-----[{ list: 'ordered' }, { list: 'bullet' }]
      [{ list: 'ordered' }, { list: 'bullet' }],
      // 上标/下标-----[{ script: 'sub' }, { script: 'super' }]
      [{ script: 'sub' }, { script: 'super' }],
      // 缩进-----[{ indent: '-1' }, { indent: '+1' }]
      [{ indent: '-1' }, { indent: '+1' }],
      // 文本方向-----[{'direction': 'rtl'}]
      [{ direction: 'rtl' }],
      // 字体大小-----[{ size: ['small', false, 'large', 'huge'] }]
      [{ size: ['small', false, 'large', 'huge'] }],
      // 标题-----[{ header: [1, 2, 3, 4, 5, 6, false] }]
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      // 字体颜色、字体背景颜色-----[{ color: [] }, { background: [] }]
      [{ color: [] }, { background: [] }],
      // 字体种类-----[{ font: [] }]
      [{ font: [] }],
      // 对齐方式-----[{ align: [] }]
      [{ align: [] }],
      // 清除文本格式-----['clean']
      ['clean'],
      // 链接、图片、视频-----['link', 'image', 'video']
      ['image']
    ]
  },
  theme: 'snow'
}

</script>

<style lang="scss" scoped>
::v-deep .ql-editor {
  height: 300px;
}

.btn-publish {
  width: 200px;
  height: 40px;
  margin-top: 60px;
}
</style>